<template>
    <view class="py-color-picker">
        <u-tag text="选择颜色" v-if="!currentValue" @click="handleColorPickerOpen"></u-tag>
        <u-tag :text="currentValue" plain v-else @click="handleColorPickerOpen"></u-tag>
        <t-color-picker ref="colorPicker" :color="defaultColor" :readOnly="readOnly"
            @confirm="handleColorPickerConfirm"></t-color-picker>
    </view>
</template>
<script>
    // 导入颜色选择器
    import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
    export default {
        name: "PyColorPicker",
        props: {
            // 绑定值
            value: {
                type: String,
                default: undefined
            },

            // 是否为只读状态
            readOnly: {
                type: Boolean,
                default: false
            }

        },
        components: {
            // 注入颜色选择器组件
            tColorPicker
        },
        data() {
            return {
                // 默认颜色值
                defaultColor: {
                    r: 0,
                    g: 0,
                    b: 0,
                    a: 1
                },

                // 当前值
                currentValue: undefined,

            }
        },
        created() {
            // 如果有绑定值
            let value = this.value;
            if (value) {
                this.currentValue = value;
            }
        },
        methods: {

            // 处理颜色选择器打开
            handleColorPickerOpen() {
                let currentValue = this.currentValue;
                if (currentValue) {
                    this.defaultColor = this.convertColorHexToRgba(currentValue);
                }
                this.$refs.colorPicker.open();
            },

            // 处理颜色选择器确定
            handleColorPickerConfirm(e) {
                this.currentValue = e && e.hex;
                this.$emit("input", this.currentValue);
            },

            // hex转rgba
            convertColorHexToRgba(hexStr) {
                // 去除#号
                let excludePrefix = hexStr.replace("#", "");
                // hex值的长度
                let hexStrLength = excludePrefix.length;
                // hex的格式 #bfa #bbffaa #bbffaaff（最后的ff表示透明度），这里判断是正确的格式
                if (hexStr.startsWith("#") && (hexStrLength == 3 || hexStrLength == 6 || hexStrLength == 8)) {
                    let hexArr = [];
                    // 最终的rgba字符串
                    let rgbaStr = "";
                    // 针对不同格式分别处理
                    switch (hexStrLength) {
                        // 如果是3位
                        case 3:
                            rgbaStr = `${excludePrefix
                                .split("")
                                .map(hex => parseInt(hex.repeat(2), 16))
                                .join(", ")}, 1`;
                            break;
                        // 如果是6位
                        case 6:
                            for (let i = 0; i < 3; i++) {
                                hexArr.push(excludePrefix.slice(i * 2, i * 2 + 2));
                            }
                            rgbaStr = `${hexArr.map(hex => parseInt(hex, 16)).join(", ")}, 1`;
                            break;
                        // 如果是8位
                        case 8:
                            for (let i = 0; i < 4; i++) {
                                hexArr.push(excludePrefix.slice(i * 2, i * 2 + 2));
                            }
                            rgbaStr = `${hexArr
                                .map((hex, index) => index < 3 && parseInt(hex, 16))
                                .filter(item => item)
                                .join(", ")}, ${(parseInt(hexArr[3], 16) / 255).toFixed(2)}`;
                            break;
                    }
                    let rgbaArray = rgbaStr.split(",");
                    let rgbaObj = {
                        r: rgbaArray[0],
                        g: rgbaArray[1],
                        b: rgbaArray[2],
                        a: rgbaArray[3],
                    };
                    return rgbaObj;
                } else {
                    return {
                        r: 0,
                        g: 0,
                        b: 0,
                        a: 1
                    }
                }
            }
        },
    }
</script>
<style lang="css" scoped>
    /* #ifdef MP-WEIXIN */
    .py-color-picker {
        display: flex;
        width: fit-content;
    }

    /* #endif */
</style>